<template>
	<view class="container u-flex-center" :style="{top: top + 'px'}" @click="$navigateTo('/subPackages/group-buying/index?activity_id=7')">
		<image src="/static/tabbar/pt.png" mode="aspectFill" class="image"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 500,
				yEdge: 100
			};
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				// 获取窗口尺寸
				const { windowWidth, windowHeight, windowTop } = uni.getSystemInfoSync()
				const _windowHeight = windowHeight
				// 计算按钮初始位置
				const query = uni.createSelectorQuery().in(this)
				query.select('.container').boundingClientRect(data => {
					if (!data) return
					const { width, height } = data
					this.top = _windowHeight - height - this.yEdge
				}).exec()
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		width: 100px;
		height: 100px;
		position: fixed;
		left: -15px;

		.image {
			width: 88rpx;
			height: 88rpx;
			position: relative;
			z-index: 2;
			animation: pulseIcon 2s ease-in-out infinite;
		}

		// 波纹效果 - 进一步缩小尺寸
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 65%; // 更小的初始尺寸
			height: 65%; // 更小的初始尺寸
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.6);
			animation: pulseWave 2s ease-out infinite;
			z-index: 1;
		}
	}

	@keyframes pulseIcon {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}
	}

	@keyframes pulseWave {
		0% {
			transform: translate(-50%, -50%) scale(1);
			opacity: 0.8;
		}

		100% {
			transform: translate(-50%, -50%) scale(1.3); // 更小的扩散比例
			opacity: 0;
		}
	}
</style>